<template>
	<view class="page">
		<!-- 标题栏  start-->
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{ i18n['待结算明细'] }}</block>
			<block slot="right">
				<!-- <view class="cuIcon-calendar text-theme2" style="font-size: 36rpx" @click="showCalendar"></view> -->
				<image :src="imgBaseUrl+'wallet/calendar.png'" class="fu-block-36" @click="showCalendar" />
			</block>
		</fu-custom>
		<!-- 标题栏  end -->
		<!-- <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view v-for="(item, index) in navList" :key="index" class="cu-item relative text-999 text-lg flex-sub"
					:class="{ cur: tabCurrentIndex === index }" @click="tabClick(index)">
					{{ item.text || '' }}
					<view class="active-line"></view>
				</view>
			</view>
		</scroll-view> -->

		<!-- 导航栏 end -->
		<view class="margin-top-xl" v-if="isShowLoading">
			<fu-loading></fu-loading>
		</view>
		<!-- 订单列表 start -->
		<!-- margin-top-110 -->
		<view class="margin-lr " v-else>
			<block v-for="(item, index) in listData" :key="index">
				<view class="padding margin-top radius-8 bg-white ">
					<view class="w100">
						<view class="text-theme text-bold text-sm ">
							{{ item.create_time }}
						</view>
						<view class="text-df w100 justify-between flex align-center  padding-top-sm">
							<text class="text-bold text-333"> {{ i18n['收益金额'] }}：￥{{ item.change_money }}</text>

							<text class="text-theme text-df">
								{{item.is_delete == 0? i18n['待结算'] : i18n['已结算'] }}
							</text>
						</view>
						<view class="text-sm text-999 padding-top-sm">{{ i18n['订单编号'] }}：{{ item.order_no }}</view>
						<view class="text-sm text-999 padding-top-sm padding-bottom">
							{{ i18n['订单金额'] }}：{{ item.goods_money }}
						</view>
						<view class="text-sm text-theme padding-top solids-top">{{ item.remark }}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 订单列表 end -->
		<!-- 日历弹框 start -->
		<fu-popup v-model="isShow" mode="center" :mask-close-able="true" @close="closePopup">
			<view class="calendar-box bg-white radius-16 width-640 padding-lr-24">
				<fu-calendar @change="change" active-bg-color="#008E4D" range-bg-color="#008E4D21" :future="false"
					start-text="" end-text="" mode="range" :isDefaultDay="false" :start-time="start_data"
					:end-time="end_data"></fu-calendar>
			</view>
		</fu-popup>
		<!-- 日历弹框 end -->
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测 end -->
	</view>
</template>

<script>
	// 定义顶部导航
	import calendar from '@/common/mixin/calendar.js';
	import pagingList from "@/common/mixin/paging_list.js"; //混合开发 请求数据
	export default {
		mixins: [calendar, pagingList],
		data() {
			return {
				isShowLoading: false, //是否显示页面初始化加载loading
				tabCurrentIndex: 0, //顶部导航 选择的第几个
				navList: [{
						state: 0,
						text: global.i18n['全部'],
						type: 0
					},
					{
						state: 2,
						text: global.i18n['自购返佣'],
						type: 1
					},
					// {
					// 	state: 3,
					// 	text: global.i18n['分享获利'],
					// 	type: 4
					// },
					{
						state: 4,
						text: global.i18n['分销推广'],
						type: 3
					}
				], //冻结顶部导航
				lists: [], //订单列表
				page: 1, //页码说
				size: 10, //一页显示几条数据
				minixPagingListsApi: global.apiUrls.getMyMoneyDetail, //混入获取列表接口名
				allowOnloadGetList: true, //是否允许onlaod加载数据
				pageingListApiMethod: 'post', //接口类型属于get
				isInit: false, //是否已经初始化
				type: 0, //请求的订单类别
				isShow: false, //日历弹框
				start_data: '', //开始日期
				end_data: '' //结束日期
			};
		},
		/**
		 * @description 获取订单列表
		 */
		onShow() {},

		methods: {
			/* @description 混入传参钩子函数
			 * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
			 */
			pagingListPostData() {
				return {
					start_time: this.start_data,
					end_time: this.end_data,
					type: this.tabCurrentIndex == 0 ? 'all' : this.type, //1：自购返，2：分享赚，3：推广分润，all：全部
					page: this.page,
					list_rows: this.size
				};
			},
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.type = this.navList[index].type;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.pagingListToggle()
			},

			/**
			 * @description  显示日历
			 */
			showCalendar() {
				this.isShow = true;
			},
			/**
			 * @description  隐藏日历
			 */
			closePopup() {
				this.isShow = false;
			},

			/**
			 * @description  获取列表
			 * @param {Object} value  用来判断第页码初始化第一次 加载页面loading
			 */
			change(value) {
				if (value.isInit) return;
				this.start_data = value.start;
				this.end_data = value.end;
				this.page = 1;
				setTimeout(() => {
					this.isShow = false;
				}, 800)
				this.pagingListToggle()
			},
		
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	// 标题栏 start
	.nav {
		position: fixed;
		z-index: 999;
		margin-bottom: 20upx;
	}

	.nav .cu-item {
		.active-line {
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			display: none;
			width: 50rpx;
			height: 4rpx;
			background: $theme;
			border-radius: 10rpx;
		}
	}

	.nav .cu-item.cur {
		color: $theme;
		border-bottom: 0 !important;

		.active-line {
			display: block;
		}
	}

	.nav .cu-item.cur::after {
		content: '';
		display: none;
	}
</style>
